import React,{ useEffect, useState } from 'react'
import Taro, { useDidShow } from '@tarojs/taro'
import { AtNavBar } from 'taro-ui'
import { View, Image, Text } from '@tarojs/components'
import "taro-ui/dist/style/components/nav-bar.scss";
import './index.less'

export default function PlusCenter(props) {
let capsuleInfo = {}
if(process.env.TARO_ENV === 'weapp') capsuleInfo = Taro.getMenuButtonBoundingClientRect()
const [plusInfo, setplusInfo] = useState({})
const [recommendList, setrecommendList] = useState([])
useEffect(()=>{
  _getInfo()
},[])
const _getInfo =e=>{
  Taro.showLoading({title:"加载中..."})
  Taro.$get('/wallet/paid/myMember','','1').then(res=>{  // /  
    setplusInfo(res.content)
  })
}
const handlePay =(content,orderId)=>{
  if(process.env.TARO_ENV == 'tt'){
    tt.pay({
      orderInfo: {
        order_id:content.data.orderId,
        order_token: content.data.orderToken
      },
      service: 5,
      _debug:1,
      success:res=>{
        if(res.code == 0){
          _getInfo()
        }
      },
      fail:err=>{
        Taro.$toast('支付失败')
      }
    });
    return;
  }
  if(process.env.TARO_ENV == 'h5' && navigator.userAgent.toLowerCase().match(/MicroMessenger/i)=="micromessenger"){
    WeixinJSBridge.invoke('getBrandWCPayRequest', {
      "appId": Taro.$mpAppid,
      "timeStamp": content.timeStamp,   
      "nonceStr": content.nonceStr,  
      "package": content.packageStr,
      "signType": content.signType,    
      "paySign":content.paySign
    },(result) => {
      if(result.err_msg == "get_brand_wcpay_request:cancel"){
        Taro.$toast('取消支付','error')
      }else{
        _getInfo()
      }
    });
    return;
  }
  Taro.requestPayment({
    timeStamp: content.timeStamp,
    nonceStr: content.nonceStr,
    package: content.package,
    signType: content.signType,
    paySign: content.paySign,
    success:res=>{
      _getInfo()
    },
    fail:err=>{
      Taro.$toast('支付失败')
    }
  })
}
return (
  <View className="plus-detail">
    <View className="center-crumbs" style={{'paddingTop': capsuleInfo?.top+'px'}}>
      <AtNavBar style={{height: capsuleInfo?.height+'px'}} border={false} onClickLeftIcon={e=>{
        Taro.navigateBack().catch(e=>{
          Taro.reLaunch({
            url:'/pages/mine/cinema-index/index'
          })
        })
      }} title=' ' leftIconType="chevron-left" />
    </View>
    <View className="detail-header">
      <View className="header">
        <Image src={require('@/images/mine/gem.svg')} className="header-logo" />
        <Text className="header-title">会员中心</Text>
      </View>

      <View className="user-card">
        <Image src={plusInfo.userAvatar} className="user-avatar" />
        <View className="user-info">
          <View className="user-name">{plusInfo.userName} <View className="member-label">{plusInfo.memberName}</View></View>
          <View className="expire-text">{plusInfo.expireDate} 到期</View>
        </View>
        {plusInfo.supportRenew?
        <View className="renew-btn" onClick={e=>{
          Taro.verifyLogin()
          Taro.showModal({
            title:'提示',
            content:'是否续费会员?',
            success:res=>{
              if(res.confirm){
                Taro.showLoading({title:'加载中...'})
                Taro.$post('/wallet/levelOrder/create',{
                  "memberId": plusInfo.memberId,
                  "ruleId": plusInfo.ruleId,
                  "type": 2
                },'1').then(async ret=>{
                  if(ret.code == '1'){
                    const data = {
                      "appId":Taro.$mpAppid,
                      "openId":await Taro.getOpenId(),
                      "orderId": ret.content.orderId
                    }
                    Taro.showLoading({title:'加载中...'})
                    Taro.$post('/wallet/levelOrder/pay',data,'1').then(res=>{
                      if(res.code == '1'){
                        handlePay(res.content,ret.content.orderId)
                      }else{
                        Taro.$toast(res.message)
                      }
                    })
                  }else{
                    Taro.$toast(ret.message)
                  }
                })
              }
            }
          })
        }}>会员续费</View>:null}
      </View>
      {plusInfo.paidEquityDtos?.length?
      <View className="privilege-grid">
        {plusInfo.paidEquityDtos?.map((item, idx) => (
          <View key={idx} className="privilege-item">
            <Image src={item.equityIconPath} className="privilege-icon" />
            <Text className="privilege-h2 dot">{item.equityName}</Text>
            <Text className="privilege-text dot">{item.subEquityName}</Text>
          </View>
        ))}
      </View>:null}
    </View>
    {recommendList.length?
    <View className="main-recommend">
      <View className="title">会员购 · 品质甄选</View>
      <View className="recommend-list">
        <View className="list-item">
          <Image src='https://img1.baidu.com/it/u=3486651663,3991438881&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' className='item-img' mode='aspectFill' />
          <View style={{padding:'10px 8px'}}>
          <View className="item-h2 dot2">美影正版 阿凡提的故事 阿凡提和毛驴Q版手办...</View>
          <View className="item-info">
            <View className="info-price"><Text style={{fontSize:12}}>￥</Text>25.90</View>
            <View className="info-span">已售 200 件</View>
          </View>
          </View>
        </View>
      </View>
    </View>:null}
  </View>
)}